<script setup>
import {ref} from "vue";
import {post} from "@/request/request";
import {onLoad, onShow} from "@dcloudio/uni-app";

const orderList = ref({});
const address = ref({});
const product_id = ref('')

address.value = uni.getStorageSync('address');
onLoad((options) => {
  console.log(options.product_id)
  product_id.value = options.product_id
})

onShow(() => {
  payOrderList()
})
const payOrderList = () => {
  post('productOrderDetails', {product_id: product_id.value}).then(res => {
    const {data} = res;
    console.log('payOrderList', data)
    orderList.value = data;
  })
}
const backClick = () => {
  uni.navigateTo({
    url: '/pages/home/home'
  })
}

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};
</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="backClick" title="پۇل تۆلەش">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="pay-order">
    <view class="order-status">
      <view class="status-img">
        <image src="/static/cart.svg"/>
      </view>
      <view class="status-title">{{ orderList.purchase_status }}</view>
      <view class="status-exp">
        <view class="exp-text">سىتىۋالغان ۋاقتى:{{ orderList.purchase_date }}</view>
        <view style="display: flex;align-items: center;text-align: center;">
          <text style="font-size: 20rpx;">{{ orderList.shipping_name }}</text>
          <image class="exp-image" src="/static/arrow-left.svg"/>
        </view>
      </view>
    </view>
    <view class="address">
      <view class="address-top">
        <view>{{ address.ad_recipient_name }}</view>
        <view style="direction: ltr">TEL:{{ address.ad_phone_number }}</view>
      </view>
      <view class="address-bottom">
        <image src="/static/position.svg"/>
        <text>{{ address.ad_street_address }}</text>
      </view>
    </view>
    <view class="order-item">
      <view class="item-img">
        <image class="item-image" :src="orderList.product_image"/>
        <view class="img-title">
          <view>{{ orderList.product_name }}</view>
          <view class="price" style="display: flex;align-items: center;justify-content: space-between;width: 400rpx">
            <view style="color: #FF9385">{{ orderList.total_price }}￥</view>
            <view>X{{ orderList.purchase_quantity }}</view>
          </view>
        </view>
      </view>
      <view class="Role">
        <view style="width: 100%">ئىشلىتىش ئۇسۇلى</view>
        <view style="width: 100%;">{{ orderList.product_introduction }}</view>
      </view>
    </view>
    <view class="pay-exp">
      <view style="width: 95%;display: flex;align-items: center;justify-content: space-between">
        <view style="font-size: 24rpx;font-weight: 400">پۇل تۆلەش شەكلى</view>
        <view style="width: 90rpx;align-items: center;justify-content: space-around;display: flex;">
          <text style="font-size: 20rpx">ئۈندىدار</text>
          <image style="width: 20rpx;height: 20rpx" src="/static/wechat.svg"/>
        </view>
      </view>
      <view style="width: 95%;display: flex;align-items: center;justify-content: space-between">
        <view style="font-size: 24rpx">مال يەتكۇزۇش ۋاختى</view>
        <view style="width: 90rpx;align-items: center;justify-content: space-around;display: flex;">
          <text style="font-size: 20rpx">بىر ھەپتە</text>
          <view style="width: 20rpx"></view>
        </view>
      </view>
    </view>
    <view class="exp-box-text">
      <view style="width: 95%;display: flex;align-items: center;justify-content: space-between">
        <view style="font-size: 24rpx">مەھسۇلات باھاسى</view>
        <view style="font-size: 20rpx">{{ orderList.product_price }}￥</view>
      </view>
      <view style="width: 95%;display: flex;align-items: center;justify-content: space-between">
        <view style="font-size: 24rpx">كىراسى</view>
        <view style="font-size: 20rpx">ھەقسىز</view>
      </view>
    </view>
  </view>
</template>


<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    height: 28rpx;
    width: 22rpx;
  }
}

.pay-order {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;
  direction: rtl;

  .order-status {
    margin: 30rpx;
    width: 690rpx;
    height: 132rpx;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .status-img {
      width: 66rpx;
      height: 68rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .status-title {
      width: 160rpx;
      font-size: 32rpx;
    }

    .status-exp {
      width: 262rpx;
      height: 100%;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;

      .exp-text {
        font-size: 20rpx;
      }

      .exp-image {
        width: 8rpx;
        height: 16rpx;
        margin-right: 20rpx;
      }
    }
  }

  .address {
    margin: 30rpx;
    width: 690rpx;
    height: 194rpx;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    .address-top {
      width: 95%;
      height: 95rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .address-bottom {
      width: 95%;
      height: 95rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      text {
        font-size: 24rpx;
      }
    }
  }

  .order-item {
    margin: 30rpx;
    width: 690rpx;
    padding: 20rpx;
    background: #FFF;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    .item-img {
      width: 95%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item-image {
        width: 176rpx;
        height: 166rpx;

        .img-title {
          width: 464rpx;
          display: flex;
          align-items: center;

          .price {
            width: 464rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }

    .Role {
      width: 95%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
    }
  }

  .pay-exp {
    width: 690rpx;
    height: 138rpx;
    background: #FFF;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.25);
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
  }

  .exp-box-text {
    margin: 20rpx;
    width: 690rpx;
    height: 138rpx;
    background: #FFF;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.25);
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
  }
}
</style>
